<script setup lang="ts">
/**
 * @prop {Partial<CardProps>} config 支持 element plus 在 el-card 中所有属性
 */
import { CardProps, ElCard } from 'element-plus';

const props = defineProps<{
  config?: Partial<CardProps>;
}>();
</script>

<template>
  <el-card class="box-card" v-bind="props.config">
    <template #header v-if="$slots.header">
      <slot name="header"></slot>
    </template>
    <slot></slot>
  </el-card>
</template>

<style lang="scss" scoped>
.box-card {
  transition: background-color var(--el-transition-duration);
  display: flex;
  flex-direction: column;
  overflow: visible;
  :deep(.el-card__header) {
    transition: background-color var(--el-transition-duration);
  }
  :deep(.el-card__body) {
    flex: 1;
  }
}
</style>
